<template>
    <div class="pagebox">
        <div class="vuebox">
            <div>
                <Headers :headTitle="headTitle"></Headers>
                <DatePicker />
                <muin />
                <Service class="ColumnarService" :ServiceTitle="ServiceTitle" :Histogram="Histogram"
                    :HistogramData="HistogramData" />
                <tableall :columnList=columnList :testDatas=testDatas />

            </div>
        </div>
    </div>
</template>

<script>
import Headers from '../../components/DataStatistics/Headers.vue'
import DatePicker from '../../components/DataStatistics/DatePicker.vue'
import muin from '../../components/DataStatistics/Select.vue'
import Service from '../../components/DataStatistics/Service.vue'
import tableall from '@/components/DataStatistics/table.vue'

export default {

    data: function () {

        return {
            testData: 1, // 这个对象里面定义所有的变量 这些变量可以 在html直接和dom绑定
            headTitle: '签约业绩统计', //页面header内容
            ServiceTitle: '签约量',//柱状图标题
            Histogram: ['老年人护理包', '基础包1', '基础包2', '基础包3', '基础包4', '儿童护理包', '高级特需包'],//柱状图数据
            HistogramData: [330, 250, 238, 140, 240, 45, 80],
            columnList: [
                { prop: "name", label: '姓名' },
                { prop: "age", label: '年龄' },
                { prop: "city", label: '城市' },
                { prop: "tel", label: '电话' }
            ],
            testDatas: [
                { No: 1, name: '张三', age: 24, city: '成都', tel: '13312345678' },
                { No: 2, name: '李四', age: 25, city: '九江', tel: '18899998888' },
                { No: 3, name: '王五', age: 26, city: '六盘水', tel: '13600001111' },
                { No: 4, name: '赵二', age: 27, city: '菏泽', tel: '13145209420' },
            ],
        }
    },
    mounted: function () {
        // 生命周期函数， 有好几个 执行的顺序都不一样，可以根据场景 选择不同的生命周期函数 这块一般是初始化数据的地方
    },
    methods: { // 这里写所有的方法， 这些方法可以在 方法内部使用this.方法名调用，也可以在html 中使用@时间名 = ‘函数名()’调用
        init() {
            // 实例方法
            // 使用this.变量可以访问data中的变量
            console.log(this.testData)
        }
    },
    components: {
        Headers,
        DatePicker,
        muin,
        Service,
        tableall
    }
}
</script>

<style  scoped>
.pagebox{
    width: 100%;
    

}
.vuebox{
    width: 85%;
    margin: 10px auto;
    padding:  30px;
    background-color: #fff;
    box-shadow: 0px 2px 7px 0px rgb(224, 224, 224);
}
.ColumnarService {
    width: 80%;
    margin: 20px auto;
}
</style>